<template>
    <div class="live-play-review">
        <nav-header></nav-header>
        <div class="zh-table">
            <div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <!-- <div class="open-width" v-if="user_level === 0">
                        <el-select v-model="platform_id" filterable filterable placeholder="来源学校/教育局">
                            <el-option
                                v-for="item in platformList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div> -->
                    <div class="open-width">
                        <el-date-picker type="daterange" :editable="false" :clearable="false" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                            v-model="pickerDate" style="width: 100%;">
                        </el-date-picker>
                    </div>
                    <div class="open-width" style="width: 100px;">
                        <el-select v-model="status" placeholder="状态">
                            <el-option label="全部状态" :value="-1"></el-option>
                            <el-option label="已通过" :value="1"></el-option>
                            <el-option label="未审核" :value="2"></el-option>
                            <el-option label="已拒绝" :value="3"></el-option>
                        </el-select>
                    </div>
                    <div class="open-width">
                        <el-input placeholder="直播名称" v-model="keyword" @keyup.enter.native="search"></el-input>
                    </div>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                </div>
                <div class="zh-open-right fr">
                    <el-button type="danger" @click="delAll">批量删除</el-button>
                </div>
            </div>
            <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                <el-table :data="listData" border max-height="541" @selection-change="handleSelectionChange">
                    <!--  <el-table-column type="index" label="序号" align="center" width="50" show-overflow-tooltip>
                    </el-table-column> -->
                    <el-table-column align="center" type="selection" show-overflow-tooltip width="50">
                    </el-table-column>
                    <!-- <el-table-column
                        prop="source_name"
                        label="来源"
                        align="center"
                v-if="$store.state.checkLevel && $store.state.platformInformation"
                        show-overflow-tooltip
                        >
                    </el-table-column> -->
                    <el-table-column prop="name" label="直播名称" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="subjectname" label="直播分类" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="teachername" label="主讲人" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="cl_name" label="直播教室" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="ip" label="设备IP" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="" label="直播时间" align="center" show-overflow-tooltip>
                        <template slot-scope="scope">{{ showLiveTime(scope.row) }}</template>
                    </el-table-column>
                    <el-table-column prop="statusName" label="审核状态" v-if="$store.state.checkLevel" align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column fixed="right" prop="handle" label="操作" align="center" width="250">
                        <template slot-scope="scope">
                            <!-- <el-button @click="videoView(scope.row)" type="text">预览</el-button> -->
                            <el-button v-if="scope.row.status === 2" type="text" @click="passTrigger(scope.row)">批准
                            </el-button>
                            <el-button v-if="scope.row.status === 2" type="text" @click="rejectTrigger(scope.row)">拒绝
                            </el-button>
                            <el-button v-if="scope.row.status === 3" type="text" @click="checkReject(scope.row)">拒绝理由
                            </el-button>
                            <el-button v-if="scope.row.status === 1" type="text">已批准</el-button>
                            <el-button v-if="scope.row.status !== 2" type="text" class="delete-button"
                                @click="delTrigger(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="table-pagination" v-show="total_number > 10">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="listParam.page_index" :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="listParam.page_size" layout="total, sizes, prev, pager, next, jumper"
                        :total="total_number">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- 视频预览begin -->
        <transition name="el-fade-in-linear">
            <div class="masking" :class="{ activeLive: isActive }">
                <div class="maskingBox">
                    <div class="masking_h">
                        <span>视频预览</span>
                        <i class="el-icon-close" @click="viewClose"></i>
                    </div>
                    <div class="masking_c">
                        <!-- <videoAlertView v-if="showVideoPlayer" :playParam.sync="playParam"></videoAlertView> -->
                        <flvdplayer v-if="showVideoPlayer" :playerOption.sync="playerOption"></flvdplayer>
                    </div>
                </div>
            </div>
        </transition>
        <!-- bengin -->
        <el-dialog title="拒绝" :visible.sync="rejectDescFlag" :close-on-click-modal="false"
            :close-on-press-escape="false" width="40%">
            <div v-text="rejectDesc"></div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rejectDescFlag = false">取 消</el-button>
                <el-button type="primary" @click="rejectDescFlag = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 拒绝理由end -->
        <!-- 拒绝bengin -->
        <el-dialog title="拒绝" :visible.sync="rejectWin" :close-on-click-modal="false" :close-on-press-escape="false"
            width="40%">
            <div class="textarea-box">
                <el-form :model="rejectForm" ref="rejectForm" label-width="80px" class="demo-ruleForm">
                    <el-form-item label="拒绝理由" prop="txt"
                        :rules="[{ required: true, message: '请填写拒绝理由', validator: checkValue }]">
                        <el-input type="textarea" placeholder="在此填写拒绝理由..." v-model="rejectForm.txt" :maxlength="100"
                            required></el-input>
                    </el-form-item>
                </el-form>
                <p class="str-num"><span v-text="rejectForm.txt.length"></span>/<span class="str-max">100</span></p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rejectWinHide">取 消</el-button>
                <el-button type="primary" @click="reject">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 拒绝end -->
    </div>
</template>
<script>
import videoAlertView from "../../public/videoAlertView";
import flvdplayer from "@/components/public/flvdplayer";
export default {
    data() {
        return {
            platform_id: "",
            keyword: "",
            platformList: [],
            loading: {
                status: false,
                txt: "获取数据..."
            },
            total_number: 0,
            listData: [],
            pickerDate: [],
            listParam: {
                start_time: '',
                end_time: '',
                type: 2,
                platform_id: 0,
                keyword: "",
                status: "",
                page_index: 1,
                page_size: 10
            },
            status: -1,
            rejectWin: false /*拒绝弹窗 */,
            rejectForm: {
                txt: "" /*拒绝理由填写 */
            },
            rejectObj: null /*拒绝对象 */,
            isActive: true,
            home_flag: 1,
            showVideoPlayer: false,
            playParam: { play_url: "", type: 'application/x-mpegURL' },
            playerOption: { url: '', },
            rejectDescFlag: false,
            rejectDesc: "",
            ids: []
        };
    },
    created() {
        this.getList();
        if (Object.is(this.user_level, 0)) {
            this.get_canseeposition();
        }
    },
    methods: {
        /**
         * 显示直播时间
         * @param {Object} obj 当前直播记录
         */
        showLiveTime(obj) {
            let start = obj.start_time;
            let end = obj.end_time;
            let temp;

            temp = start + ' - ' + end.substring(11);

            return temp;
        },
        checkValue(rule, value, callback) {
            if (!checkSpace(value)) {
                callback(new Error("请输入有效值"));
            } else {
                callback();
            }
        },
        get_canseeposition() {
            const success = res => {
                this.platformList = res.data.data;
            };
            this.$ajax.get("api/level/get_canseeposition_school", {
                params: {},
                func: { success: success }
            });
        },
        getList() {
            this.loading.status = true;
            let params = this.listParam;
            params.start_time = this.listParam.start_time ? (this.listParam.start_time + ' 00:00:00') : this.listParam.start_time;
            params.end_time = this.listParam.end_time ? (this.listParam.end_time + ' 23:59:59') : this.listParam.end_time;

            const success = res => {
                this.loading.status = false;
                this.listData = res.data.data;

                if (this.listData.length > 0) {
                    this.listData.forEach(item => {
                        if (item.status === 1) {
                            item.statusName = '已通过';
                        } else if (item.status === 2) {
                            item.statusName = '未审核';
                        } else if (item.status === 3) {
                            item.statusName = '已拒绝';
                        } else {
                            item.statusName = '已失效';
                        }
                    })
                }

                this.total_number = res.data.data_sum;
            };

            this.$ajax.get("api/live/live_auth", { params: params, func: { success: success } });
        },
        search() {
            this.listParam.start_time = this.pickerDate.length > 0 ? this.pickerDate[0] : '';
            this.listParam.end_time = this.pickerDate.length > 0 ? this.pickerDate[1] : '';
            this.listParam.status = this.status;
            this.listParam.platform_id = this.platform_id;
            this.listParam.keyword = this.keyword;
            this.listParam.page_index = 1;
            this.getList();
        },
        reset() {
            this.pickerDate = [];
            this.platform_id = "";
            this.keyword = "";
            this.status = -1;
            this.listParam = {
                start_time: '',
                end_time: '',
                type: 2,
                platform_id: 0,
                keyword: "",
                status: "",
                page_index: 1,
                page_size: 10
            };
            this.getList();
        },
        handleSizeChange(size) {
            this.listParam.page_size = size;
            this.getList();
        },
        handleCurrentChange(page) {
            this.listParam.page_index = page;
            this.getList();
        },
        pass(id) {
            /*批准*/
            let params = {
                id: id,
                status: 1
            };
            const success = res => {
                this.$message.success(res.msg);
                this.getList();
            };
            const fail = (res => {
                /** 2019-6-10 失败返回提示是一个数组 */
                let text = '';

                res.msg.forEach(item => {
                    text += item + '<br />';
                })

                this.$message({
                    type: 'error',
                    message: text,
                    dangerouslyUseHTMLString: true
                });
            })

            this.$ajax.post("api/live/live_approve", params, { func: { success: success, fail: fail } });
        },
        passTrigger(data) {
            /*批准提示 */
            let tipsTxt = `确定批准${data.name}通过审核吗？`;
            this.$confirm(tipsTxt, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.pass(data.id);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消批准"
                    });
                });
        },
        rejectTrigger(data) {
            /*拒绝弹窗 */
            this.rejectWin = true;
            this.rejectObj = data;
        },
        rejectWinHide() {
            /*隐藏拒绝弹窗 */
            this.rejectWin = false;
            this.rejectObj = null;
            this.rejectForm.txt = "";
        },
        reject() {
            /*拒绝 */
            let params = {
                id: this.rejectObj.id,
                status: 3,
                comment: this.rejectForm.txt
            };
            const success = res => {
                this.$message.success(res.msg);
                this.rejectWinHide();
                this.getList();
            };
            this.$refs[`rejectForm`].validate(valid => {
                if (valid) {
                    this.$ajax.post("api/live/live_approve", params, {
                        func: { success: success }
                    });
                } else {
                    return;
                }
            });
        },
        handleSelectionChange(val) {
            this.ids = [];
            if (val.length > 0) {
                val.forEach(item => {
                    this.ids.push(item.id);
                })
            }
        },
        del(id) {
            let params = {
                id: id,
                status: 0
            };
            const success = res => {
                this.$message.success(res.msg);

                if (this.listData.length - 1 === 0) {
                    if (this.listParam.page_index > 1) {
                        this.listParam.page_index--;
                    } else {
                        this.listParam.page_index = 1;
                    }
                }

                this.getList();
            };
            this.$ajax.post("api/live/live_approve", params, { func: { success: success } });
        },
        delAll() { /*批量删除 */
            if (this.ids.length <= 0) {
                this.$message.warning("请选择要删除的直播");
                return false;
            }
            const cancel = (res => { })
            const yes = (res => {
                this.listData.forEach((item, index) => {
                    this.ids.forEach((itm, idx) => {
                        if (item.id == itm) {
                            this.del(itm, 0)
                        }
                    })
                })
            })

            this.e_confirm({ yes, cancel, txt: "确定要删除选中的直播吗？" });
        },
        delTrigger(data) {
            /*删除提示 */
            let tipsTxt = `确认删除${data.name}吗？`;

            this.$confirm(tipsTxt, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.del(data.id);
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除"
                });
            });
        },
        // 视频预览
        viewClose() {
            this.showVideoPlayer = false;
            this.isActive = true;
        },
        videoView(obj) {
            let jsonData = obj;
            this.loading.status = true;
            let success = data => {
                this.loading.status = false;
                this.playParam.play_url = jsonData.play_url;
                this.playerOption.url = jsonData.play_url;
                this.showVideoPlayer = true;
                this.isActive = false;
            };
            let fail = data => {
                this.loading.status = false;
                this.$message.warning(data.msg);
            };
            //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            this.$ajax.get("api/video/check_view", {
                params: { id: jsonData.res_id },
                func: { success: success, fail: fail }
            });
        },
        checkReject(data) {
            this.rejectDescFlag = true;
            this.rejectDesc = data.comment;
        }
    },
    components: {
        videoAlertView,
        flvdplayer,
    }
};

</script>
<style lang="scss">
.live-play-review {
    .textarea-box {
        position: relative;

        .el-textarea__inner {
            min-height: 120px !important;
            resize: none;
        }

        .str-num {
            position: absolute;
            padding: 0;
            margin: 0;
            left: 0;
            bottom: 5px;
            right: 15px;
            text-align: right;

            .str-max {
                color: #ddd;
            }
        }
    }



    .masking {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: 0.5s;
        background: rgba(0, 0, 0, 0.3);
        z-index: 4;

        .maskingBox {
            position: absolute;
            top: 20%;
            left: 50%;
            width: 800px;
            margin-left: -400px;
            background: #fff;
        }

        .masking_h {
            padding: 10px 15px;
            background: #348efc;
            text-align: center;
            text-align-last: justify;

            >span,
            >i {
                font-size: 16px;
                text-align-last: initial;
                display: inline-block;
                vertical-align: middle;
                color: #fff;
            }

            >i {
                cursor: pointer;
            }
        }

        .masking_c {
            height: 450px;
            padding: 15px;
        }
    }

    .activeLive {
        opacity: 0;
        visibility: hidden;
    }

    .videPAHT {
        color: #409eff;
        margin-right: 10px;
    }
}
</style>
